<template>
	<view class="container container326828">
		<view class="flex diygw-col-24 swiper-clz">
			<swiper :current="swiperIndex" class="swiper swiper-indicator_rect_radius" @change="changeSwiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" interval="3000" circular="true" style="height: 360rpx">
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/yx.png" class="diygw-swiper-image"></image>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/pic2.jpg" class="diygw-swiper-image"></image>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="/static/pic3.jpg" class="diygw-swiper-image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex diygw-col-24">
			<diy-noticebar class="flex1 diy-notice-bar" :vertical="true" color="#07c160" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> 欢迎使用水电在线充值系统。 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> 欢迎使用水电在线充值系统。 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex tabs diygw-col-24 flex-direction-column tabs-clz">
			<scroll-view scroll-x :show-scrollbar="false" enhanced :scroll-into-view="'scroll-' + tabsIndex" :scroll-left="tabsLeft" scroll-with-animation class="diygw-tabs text-center scale-title small-border tabs-title">
				<view :id="'scroll-' + index" class="diygw-tab-item tabs-item-title" :class="index == tabsIndex ? ' font-bold   cur text-green  ' : ''" v-for="(item, index) in tabsDatas" :key="index" @click="changeTabs" :data-index="index"> <text v-if="item.icon" :class="item.icon"></text> {{ item.text }} </view>
			</scroll-view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex1-clz">
			<view class="flex flex-wrap diygw-col-12 justify-center items-center flex2-clz" @click="todetail">
				<image src="/static/power.png" class="response diygw-col-6" mode="widthFix"></image>
				<view class="flex flex-wrap diygw-col-18 flex-direction-column justify-start items-baseline">
					<text class="diygw-text-line1 diygw-col-0 text-clz"> 电费 </text>
					<text class="diygw-text-line1 diygw-col-0 text2-clz"> 查看详情 </text>
					<text class="diygw-text-line1 diygw-col-0 text1-clz"> *金华 | *单元306 </text>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-center items-center flex4-clz">
				<image src="/static/water.png" class="response diygw-col-6" mode="widthFix"></image>
				<view class="flex flex-wrap diygw-col-18 flex-direction-column justify-start items-baseline">
					<text class="diygw-text-line1 diygw-col-0 text3-clz"> 水费 </text>
					<text class="diygw-text-line1 diygw-col-0 text7-clz"> 查看详情 </text>
					<text class="diygw-text-line1 diygw-col-0 text8-clz"> *金华 | *单元306 </text>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex13-clz">
			<text class="diygw-col-24 text6-clz"> 水电在线缴费充值 </text>
			<text class="diygw-col-24 text5-clz"> 淮安兴星佳科技有限公司 </text>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				swiperIndex: 0,
				tabsDatas: [
					{ text: `全部`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` },
					{ text: `菜单二`, icon: `` }
				],
				tabsTimer: null,
				tabsMainIndex: 0,
				tabsLeft: 0,
				tabsWidth: 0,
				tabsItemWidth: 0,
				tabsIndex: 0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			todetail(){
				uni.navigateTo({
					url:'/pages/index/charge'
				})
			},
			changeSwiper(evt) {
				let swiperIndex = evt.detail.current;
				this.setData({ swiperIndex });
			},
			// 获取一个目标元素的高度
			getElTabsRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.' + elClass)
						.fields(
							{
								size: true
							},
							(res) => {
								// 如果节点尚未生成，res值为null，循环调用执行
								if (!res) {
									setTimeout(() => {
										this.getElTabsRect(elClass);
									}, 10);
									return;
								}
								this[dataVal] = res.width;
								resolve();
							}
						)
						.exec();
				});
			},
			// 设置左边菜单的滚动状态
			async setTabsStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.tabsWidth == 0 || this.tabsItemWidth == 0) {
					await this.getElTabsRect('tabs-title', 'tabsWidth');
					await this.getElTabsRect('tabs-item-title', 'tabsItemWidth');
				}
				// 将菜单活动item垂直居中
				this.tabsLeft = index * this.tabsItemWidth + this.tabsItemWidth / 2 - this.tabsWidth / 2;
			},
			changeTabs(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.tabsIndex) return;
				this.setData({
					tabsIndex: index
				});
				this.setTabsStatus(index);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-clz {
		margin-left: 20rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.tabs-clz {
		margin-left: 20rpx;
		color: #212121;
		width: calc(100% - 20rpx - 20rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}
	.tabs-item-title {
		color: #5c5c5c !important;
	}
	.tabs-title {
	}
	.tabs-item-title.cur {
		color: #282828 !important;
	}
	.flex1-clz {
		margin-left: 20rpx;
		padding-top: 10rpx;
		color: #ffffff;
		padding-left: 10rpx;
		width: calc(100% - 20rpx - 20rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 12rpx;
		background-size: cover;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(50% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		background-image: url(/static/f3a3dc12-e782-45d3-a6d3-d35bf37078a7.png);
		margin-bottom: 10rpx;
		height: 160rpx !important;
		padding-right: 16rpx;
	}
	.text-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text2-clz {
		margin-left: 10rpx;
		color: #000000;
		font-size: 26rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text1-clz {
		margin-left: 10rpx;
		color: #000000;
		font-size: 26rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.flex4-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 12rpx;
		background-size: cover;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(50% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		background-image: url(/static/84b03c96-70a7-4ee0-bc71-c0d6e274e905.png);
		margin-bottom: 10rpx;
		height: 160rpx !important;
		padding-right: 16rpx;
	}
	.text3-clz {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 32rpx !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text7-clz {
		margin-left: 10rpx;
		color: #000000;
		font-size: 26rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.text8-clz {
		margin-left: 10rpx;
		color: #000000;
		font-size: 26rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.flex13-clz {
		margin-left: 10rpx;
		left: 0rpx;
		bottom: 0rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 80rpx;
		margin-right: 10rpx;
	}
	.text6-clz {
		color: #009dff;
		font-size: 36rpx !important;
		text-align: center;
	}
	.text5-clz {
		padding-top: 10rpx;
		color: #a3a3a3;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
	}
	.container326828 {
		background-color: #ffffff;
	}
</style>
